{{extend './head.html'}}
{{block 'content'}}
<div class="Xcontent">
    <ul class="Xcontent01">

        <div class="Xcontent-bimg"><img src="{{info.urlList[0]}}"></div>
        <ol class="Xcontent08">
            {{each info.urlList}}
            <div class="Xcontent-img"><img src="{{$value}}"></div>
            {{/each}}
        </ol>
        <ol class="Xcontent13">
            <div class="Xcontent14"><a href="#">
                    <p>{{info.name}}</p>
                </a></div>
            <div class="Xcontent16">
                <p>{{info.info}}</p>
            </div>
            <div class="Xcontent17">
                <p class="Xcontent18">售价</p>
                <p class="Xcontent19">￥<span>{{info.porice}}</span></p>
                <div class="Xcontent20">

                </div>
                <div class="Xcontent23">
                    <p class="Xcontent24">服务</p>
                    <p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp; 48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp; 满88元免邮
                    </p>
                </div>

            </div>
            <div class="Xcontent30">
                <p class="Xcontent31">数量</p>
                <div class="Xcontent32"><img src="public/img/shangpinxiangqing/X15.png"></div>
                <form>
                    <input class="input" value="1"></form>
                <div class="Xcontent33"><img src="public/img/shangpinxiangqing/16.png"></div>

            </div>
            <!-- <div class="Xcontent34"><a href="#"><img src="public/img/shangpinxiangqing/X17.png"></a></div> -->
            <div class="Xcontent35 myModals" data-toggle="modal" data-method="setTop" sid="{{info.id}}"><a href="#"><img
                        src="public/img/shangpinxiangqing/X18.png"></a></div>
        </ol>
    </ul>
</div>
{{/block}}
{{block 'contentcss'}}
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
</style>
{{/block}}

{{block 'contentjs'}}
<script>
    var count = 1
    $(document).ready(function () {
        var $miaobian = $('.Xcontent08>div');
        var $huantu = $('.Xcontent-bimg>img');
        $miaobian.mousemove(function () { miaobian(this); });
        function miaobian(thisMb) {
            for (var i = 0; i < $miaobian.length; i++) {
                $miaobian[i].style.borderColor = '#dedede';
            }
            thisMb.style.borderColor = '#cd2426';

            $huantu[0].src = thisMb.children[0].src;
        }
        $(".Xcontent33").click(function () {
            count = parseInt($('.input').val()) + 1;
            $('.input').val(count);
        })

        $(".Xcontent32").click(function () {
            count = $(".input").val()
            if (count > 0) {
                $(".input").val(count - 1);
            }
        })
    })

    layui.use('layer', function () {
        var $ = layui.jquery, layer = layui.layer;
        function getCookie(name) {
            var arr = document.cookie.split("; ");
            for (var i = 0, len = arr.length; i < len; i++) {
                var item = arr[i].split("=");
                if (item[0] == name) {
                    return item[1];
                }
            }
            return "";
        }
        function getshopping(name) {
            return JSON.parse(localStorage.getItem(name));
        }

        //触发事件
        var active = {
            setTop: function (othis) {
                //判断是否登录
                if (getCookie('user_key') == null) {
                    layer.msg('请先登录', { icon: 5 });
                    return;
                }
                var val;
                var that = this;
                var sid = $(that).attr('sid');
                $.ajax({
                    type: "get",
                    url: "/api/shoppinfo?id=" + sid,
                    success: function (datas) {
                        if (datas.flog) {
                            val = datas.data[0];
                            var type = othis.data('type'), text = othis.text();
                            layer.open({
                                type: 1
                                , offset: type
                                , id: 'layerDemo' + type
                                , content: '<div style="padding: 20px 100px;">是否购买确认购买该商品？</div>'
                                , btn: ['取消', '确定']
                                , btnAlign: 'c'
                                , shade: 0
                                , yes: function () {
                                    layer.closeAll();
                                },
                                btn2: function () {
                                    if (getshopping(val.name) == null) {
                                        localStorage.setItem(val.name, JSON.stringify({
                                            id: val.id,
                                            name: val.name,
                                            number: count
                                        }));
                                    } else {
                                        localStorage.setItem(val.name, JSON.stringify({
                                            id: val.id,
                                            name: val.name,
                                            number: count,
                                        }));
                                    }
                                    layer.msg('加入购物车成功', { icon: 6 });
                                }
                            });
                        } else {
                            layer.msg('程序异常!', { icon: 5, time: 1000 });
                        }
                    },
                    error: function (err) {
                        layer.msg('程序异常!', { icon: 5, time: 1000 });
                    }
                });

            }
        }

        $('.myModals').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        }
        );
    });

</script>
{{/block}}